Виджеты. Buttons GestureDetector

➡️Ссылка на репозиторий с кодом этого урока

Подготовка

1. Создаём новую git ветку с названием 4.2-Buttons
2. В директории lib создадим новую папку stateful_widgets 
3. Добавим новый файл с названием s3_button_widget.dart

Кнопки

Во Flutter можно использовать несколько стандартных видов кнопок.
Но так же, никто не мешает придумать свои полностью кастомные кнопки.

ElevatedButton(), OutlinedButton(), FilledButton(), TextButton(), IconButton()

Чтобы создать новый StatefulWidget воспользуемся сниппетами внутри IDE в которой вы работаете.

Файл s3_button_widget.dart

import 'package:flutter/material.dart';  
  
class ButtonsExample extends StatefulWidget {  
  const ButtonsExample({super.key});  
  
  @override  
  State<ButtonsExample> createState() => _ButtonsExampleState();  
}  
  
class _ButtonsExampleState extends State<ButtonsExample> {  
  int counter = 100; // Свойство виджета  
  
  // Метод который изменяет свойство виджета и запускает процесс
  // перерисовки UI этого виджета  
  void _increaseCounter(int value) {  
    setState(() {  
      counter += value;  
    });  
  }  
  
  @override  
  Widget build(BuildContext context) {  
    return Column(  
        mainAxisAlignment: MainAxisAlignment.center,  
        children: [  
          Text("\$ $counter BitCoins", style: TextStyle(fontSize: 22)),  
          SizedBox(height: 20),  
  
          // Дальше будут кнопки  
        ]  
    );  
  }  
}

                  

Добавляем по очереди каждую кнопку чтобы увидеть различия в отображении и особенности работы

Файл s3_button_widget.dart

import 'package:flutter/material.dart';  
  
class ButtonExample extends StatefulWidget {  
  const ButtonExample({super.key});  
  
  @override  
  State<ButtonExample> createState() => _ButtonExampleState();  
}  
  
class _ButtonExampleState extends State<ButtonExample> {  
  int counter = 100; // Свойство виджета  
  
  // Метод который изменяет свойство виджета и запускает процесс  
  // перерисовки UI этого виджета  
  void _increaseCounter(int value) {  
    setState(() {  
      counter += value;  
    });  
  }  
  
  @override  
  Widget build(BuildContext context) {  
    return Column(  
      mainAxisAlignment: MainAxisAlignment.center,  
      children: [  
        Text("\$ $counter BitCoins", style: TextStyle(fontSize: 22)),  
        SizedBox(height: 20),  
  
        // Основная приподнятая кнопка  
        ElevatedButton(  
          // Чтобы в колбэк функцию передать параметр
          // Нужно её обренуть в ещё одну анонимную функцию
          onPressed: () => _increaseCounter(1),  
          child: Text("Получить  \$1"),  
        ),  
  
        // Кнопка с контуром  
        OutlinedButton(  
          onPressed: () => _increaseCounter(5),  
          child: Text("Получить  \$5"),  
        ),  
  
        // Заполненная цветом кнопка
        FilledButton(  
          onPressed: () => _increaseCounter(10),  
          child: Text("Получить \$10"),  
        ),  
  
        // Простая текстовая кнопка  
        TextButton(  
          onPressed: () => _increaseCounter(20),  
          child: Text("Получить \$20"),  
        ),  
  
        // Кнопка-иконка  
        IconButton(  
          onPressed: () => _increaseCounter(50),  
          icon: Icon(Icons.monetization_on),  
          color: Colors.black87,  
        ),  
  
        SizedBox(height: 20),  
  
        // Приподнятая кнопка с иконкой  
        ElevatedButton.icon(  
          onPressed: () => _increaseCounter(25),  
          icon: Icon(Icons.attach_money),  
          label: Text("Получить \$25"),  
        ),  
  
        // Кнопка с иконкой внутри контура  
        OutlinedButton.icon(  
          onPressed: () => _increaseCounter(30),  
          icon: Icon(Icons.account_balance_wallet),  
          label: Text("Получить \$30"),  
        ),  
  
      ],  
    );  
  }  
}

                  

Кнопка без стилей и Всплывающее сообщение SnackBar

Ещё есть базовая кнопка без стилей MaterialButton или удобные кнопки-иконки для закрытия CloseButton и действия назад BackButton

Файл s3_button_widget.dart

class ButtonExample2 extends StatefulWidget {  
  const ButtonExample2({super.key});  
  @override  
  State<ButtonExample2> createState() => _ButtonExample2State();  
}  
  
class _ButtonExample2State extends State<ButtonExample2> {  

  // Метод для вызова всплывающего сообщения SnackBar  
  // в Android это Toast  
  // в iOS это Alert  
  void _printButtonMessage(BuildContext context, String message) {  
    ScaffoldMessenger.of(context).showSnackBar(
      SnackBar(content: Text(message))
    );  
  }  
  
  @override  
  Widget build(BuildContext context) {  
    return Column(  
      mainAxisAlignment: MainAxisAlignment.center,  
      children: [  
        CloseButton(  
          onPressed: () => _printButtonMessage(context, "😎 CloseButton"),  
        ),  
        BackButton(  
          onPressed: () => _printButtonMessage(context, "😎 BackButton"),  
        ),  
        MaterialButton(  
          onPressed: () => _printButtonMessage(context, "😎 MaterialButton"),  
          child: Text("Push me"),  
        ),  
      ],  
    );  
  }  
}

                  

Всплывающее сообщение SnackBar

SnackBar — это временное уведомление, которое появляется в нижней части экрана и предоставляет пользователю информацию о выполненном действии или событии. Оно может содержать текст и необязательное действие, например, кнопку "Отмена". SnackBar автоматически исчезает через заданный промежуток времени.

ScaffoldMessenger.of(context).showSnackBar(
  SnackBar(content: Text("Временное сообщение"))
);

                  

ScaffoldMessenger управляет показом SnackBar и других временных уведомлений, обеспечивая их корректное отображение.

Передача context в ScaffoldMessenger.of необходима для получения доступа к текущему дереву виджетов и определения, какой ScaffoldMessenger должен управлять отображением SnackBar. 

BuildContext предоставляет информацию о расположении виджета в дереве и позволяет находить необходимые виджеты-предки.